<script setup>
import { ref } from 'vue'
defineProps(['api-url', 'page-size'])

const items = ref([])

setTimeout(() => {
    items.value = [
        {
            body: 'Scoped Slots Guide', username: 'Tony', links: 20
        },
        {
            body: "Vue Tutorial", username: 'Lily', links: 10
        }
    ]
}, 1000)
</script>

<template>
    <ul>
        <li v-if="!items.length">
            Loading...
        </li>
        <li v-for="item in items" :key="item.body">
            <slot name="item" v-bind="item" />
        </li>
    </ul>
</template>

<style scoped>
    ul {
        list-style-type: none;
        padding: 5px;
        background: linear-gradient(315deg, #42d392, #647eff);
    }
    li {
        padding: 5px 20px;
        margin: 10px;
        background-color: #fff;
        color: #000;
    }
</style>